<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>节点</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">节点列表</div>
                        <div class="layui-card-body">
                            <div class="layui-form-item">
                                <div class="layui-block">
                                    <input type="text" class="layui-input" id="aassss" placeholder="输入关键词点击回车检索" autocomplete="off">
                                </div>
                            </div>
                            <table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
                            <script type="text/html" id="toolbarDemo">
                                <div class="layui-btn-container">
                                    <button type="button" lay-event="tableTreeEdit" id="btn1" class="layui-btn  layui-btn-sm">添加顶级节点</button>
                                    <button type="button" lay-event="tableTreeEdit" id="btn6" class="layui-btn  layui-btn-sm">关闭节点</button>
                                    <button type="button" lay-event="tableTreeEdit" id="btn7" class="layui-btn  layui-btn-sm">展开节点</button>
                                </div>
                            </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js?t=1"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
        ,version: 1
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','layer','tableTree','admin'], function(){
        var table = layui.table
            ,$ = layui.$
            ,tableTree = layui.tableTree
            ,layer = layui.layer
            ,admin = layui.admin
            ,treeTable = tableTree.render({
            elem: '#tableId'
            ,id:'tableTree'
            , response: {
                statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
            }
            ,url:'/power/nodeData'
            ,height: 'full-90'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: false
            ,treeConfig:{ //表格树所需配置
                showField:'title' //表格树显示的字段
                ,treeid:'id' //treeid所对应字段的值在表格数据中必须是唯一的，且不能为空。
                ,treepid:'parent_node_id'//父级id字段名称
                ,iconClass:'layui-icon-right' //小图标class样式 窗口图标 layui-icon-layer
                ,showToolbar: true //展示工具栏 false不展示 true展示
            }
            , cols: [[
                {field: 'title', title: '名称',minWidth:380}
                , {field: 'id', title: 'id'}
                , {field: 'order', title: '排序', config: {type: 'input'}, event: 'order',sort: true}
                , {field: 'icon', title: '图标', event: 'icon', config: {type: 'input'},minWidth:200}
                , {field: 'node_path', title: '路径', event: 'node_path', config: {type: 'input'},minWidth:300}
                , {field: 'permission_id', title: '权限标识', event: 'permission_id', config: {type: 'input'}}
                , {
                    field: 'status',
                    title: '状态',
                    event: 'status',
                    config: {type: 'select', data: [{name: 1, value: '正常'}, {name: 2, value: '禁用'}]}
                }
                , {
                    field: 'type',
                    title: '类型',
                    event: 'type',
                    config: {type: 'select', data: [{name: 1, value: '节点'}, {name: 2, value: '菜单'}]}
                }
            ]], done: function () {
                treeTable.closeAllTreeNodes();
            }
        });








        /**
         *表格的增删改都会回调此方法
         * 与table.on(tool(lay-filter))用法一致。
         **/
        tableTree.on('tool(tableEvent)',function (obj) {
            var field = obj.field; //单元格字段
            var value = obj.value; //修改后的值
            var data = obj.data; //当前行数据
            var event = obj.event; //当前单元格事件属性值
            //event为del为删除 add则新增 edit则修改 async则为异步请求数据。
            //这个三个值固定死了，切莫定义与之三个重复的event。
            if(event !== 'del' && event !== 'add'  && event !== 'type' && event !== 'async'){
                var update = {};
                update[field] = value;
                obj.update(update);
                console.log(obj)
            }
            if(event === 'type'){
                obj.update({type:value.value});
            }
            if(event === 'status'){
                obj.update({type:value.value});
            }
            if(event === 'del'){
                obj.del();
            }
            if(event === 'add'){ //点击操作栏加号图标时触发
                //异步、同步都可以使用
                //obj.add(arr)生成表格树,arr参数为数组，数组中元素的treeid字段值重复则被过滤掉
                obj.add([]) //参数不传或为空数组时 => 新增空行
            }
            if(event === 'async'){ //点击方向箭头小图标时触发
                //可ajax异步请求后台数据,回调obj.async(arr)生成表格树,arr参数为数组
                //数组中元素的treeid字段值重复则被过滤掉
                obj.async();
            }
            if(event === 'edit' || event === 'order' || event === 'node_path' || event === 'icon' || event === 'type' || event === 'permission_id' || event === 'status'){
                if (event === 'status'){
                    value = value.name;
                }
                if (event === 'type'){
                    value = value.name;
                }
                admin.req({
                    url: '/power/upNode'
                    , type: "POST"
                    , data: {'field': field, "id": data.id, value: value}
                    , done: function (res) {
                    }, not_finish: function (res) {
                        layer.msg(res.msg);
                    }
                });
            }
        });

        /**
         *监听复选框选中状态
         **/
        tableTree.on('checkbox(tableEvent)', function(obj){
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            console.log(obj.data);
        });
        var isAsc = true;
        table.on('toolbar(tableEvent)', function(obj){
            var id = $(this).attr("id");
            if(id==="btn1"){
                //data可以为空，为空则创建空行，否则按照data数据生成行
                treeTable.addTopTreeNode();//新增最上级节点
            }else if(id === 'btn2') {
                console.log(treeTable.getCheckedTreeNodeData()) //获取选中行的树状数据
            }else if(id === 'btn3') {
                console.log(treeTable.getTableTreeData())//获取表格树所有数据
            }else if(id === 'btn4') {
                treeTable.closeTreeNode('6'); // 根据tr或者树id关闭相对应树节点
            }else if(id === 'btn5') {
                treeTable.openTreeNode(6); // 根据tr或者树id展开相对应树节点
            }else if(id === 'btn6') {
                treeTable.closeAllTreeNodes();  //关闭所有树节点
            }else if(id === 'btn7') {
                treeTable.openAllTreeNodes(); //展开所有树节点
            }else if(id === 'btn8') {
                console.log(treeTable.getTreeOptions()); //获取表格配置
            }else if(id === 'btn9'){
                treeTable.reload(); //表格树进行reload
            }else if(id === 'btn10') {
                treeTable.delTreeNode('19'); //根据tr元素或者节点id删除节点及相关叶子节点
            }else if(id === 'btn11') {
                treeTable.clearSearch(); //重置搜索
            }else if(id === 'btn12') {
                //传了数据进去进行刷新，那么会把原来的数据给删除了，
                //然后把传进去的数据进行更新进去
                treeTable.refresh();
            }else if(id === "btn13"){
                treeTable.sortByTreeNode(28,'sort',isAsc); //指定节点或节点id排序
                isAsc = !isAsc;
            }
        });

        /**
         * 整个表格树排序，与layui进行了整合。
         */
        table.on('sort(tableEvent)', function(obj){
            treeTable.sort({field:obj.field,desc:obj.type === 'desc'})
        });

        $('#aassss').on('change',function () {
            treeTable.keywordSearch(this.value); //关键词搜索树
        });

    })
</script>
</body>
</html>

